{% extends "admin/base.html" %}

{% block title %}个人资料{% endblock %}

{% block content %}
<div class="profile-container">
    <!-- 页面头部 -->
    <div class="profile-header">
        <h1><i class="fas fa-user"></i> 个人资料</h1>
        <p class="profile-subtitle">管理您的个人信息和资料</p>
    </div>

    <!-- 个人资料表单 -->
    <div class="profile-content">
        <div class="profile-form-section">
            <div class="form-card">
                <div class="form-header">
                    <h2><i class="fas fa-user-edit"></i> 基本信息</h2>
                    <p>更新您的基本个人信息</p>
                </div>
                
                <form id="profile-form" class="profile-form">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="username" class="form-label">用户名 *</label>
                            <input type="text" id="username" name="username" class="form-control" value="{{ current_user.username }}" readonly>
                            <small class="form-text">用户名不可修改</small>
                        </div>
                        <div class="form-group">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" id="name" name="name" class="form-control" value="{{ current_user.name or '' }}" placeholder="请输入您的姓名">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="email" class="form-label">邮箱 *</label>
                            <input type="email" id="email" name="email" class="form-control" value="{{ current_user.email or '' }}" required>
                        </div>
                        <div class="form-group">
                            <label for="role" class="form-label">角色</label>
                            <input type="text" id="role" name="role" class="form-control" value="{{ current_user.role }}" readonly>
                            <small class="form-text">角色不可修改</small>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="bio" class="form-label">个人简介</label>
                        <textarea id="bio" name="bio" class="form-control" rows="4" placeholder="介绍一下自己...">{{ current_user.bio or '' }}</textarea>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="website" class="form-label">个人网站</label>
                            <input type="url" id="website" name="website" class="form-control" value="{{ current_user.website or '' }}" placeholder="https://example.com">
                        </div>
                        <div class="form-group">
                            <label for="github" class="form-label">GitHub</label>
                            <input type="url" id="github" name="github" class="form-control" value="{{ current_user.github or '' }}" placeholder="https://github.com/username">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="twitter" class="form-label">Twitter</label>
                        <input type="url" id="twitter" name="twitter" class="form-control" value="{{ current_user.twitter or '' }}" placeholder="https://twitter.com/username">
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> 保存资料
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="resetForm()">
                            <i class="fas fa-undo"></i> 重置
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 头像设置 -->
        <div class="avatar-section">
            <div class="form-card">
                <div class="form-header">
                    <h2><i class="fas fa-image"></i> 头像设置</h2>
                    <p>上传您的个人头像</p>
                </div>
                
                <div class="avatar-upload">
                    <div class="avatar-preview">
                        <img id="avatar-preview" src="{{ current_user.avatar or '/static/images/default-avatar.svg' }}" alt="头像预览">
                    </div>
                    <div class="avatar-actions">
                        <input type="file" id="avatar-input" accept="image/*" style="display: none;">
                        <button type="button" class="btn btn-outline-primary" onclick="document.getElementById('avatar-input').click()">
                            <i class="fas fa-upload"></i> 选择头像
                        </button>
                    </div>
                    <div class="avatar-tips">
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            支持 JPG、PNG 格式，建议尺寸 200x200 像素，文件大小不超过 2MB
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 个人资料页面样式 - 保留自定义布局和动画效果 */
.profile-container {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0;
}

.profile-header {
    padding: 1.5rem 2rem 1rem 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.profile-header h1 {
    margin: 0 0 0.5rem 0;
    color: #334155;
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.profile-subtitle {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.profile-content {
    padding: 2rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr;
}

.form-card {
    background-color: #f9fafb;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
}

.form-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.form-header h2 {
    margin: 0 0 0.5rem 0;
    color: #334155;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-header p {
    margin: 0;
    color: #6b7280;
    font-size: 0.875rem;
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
}

.form-control {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: all 0.3s;
    background-color: white;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:read-only {
    background-color: #f9fafb;
    color: #6b7280;
}

.form-text {
    font-size: 0.75rem;
    color: #6b7280;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-0.125rem);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
}

.btn-secondary:hover {
    background-color: #4b5563;
}

.btn-outline-primary {
    background-color: transparent;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.btn-outline-primary:hover {
    background-color: #3b82f6;
    color: white;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #6b7280;
    border: 1px solid #6b7280;
}

.btn-outline-secondary:hover {
    background-color: #6b7280;
    color: white;
}

/* 头像设置样式 */
.avatar-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.avatar-preview {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e5e7eb;
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.avatar-tips {
    text-align: center;
    max-width: 20rem;
}

.text-muted {
    color: #6b7280;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .profile-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
// 表单重置
function resetForm() {
    if (confirm('确定要重置表单吗？未保存的更改将丢失。')) {
        document.getElementById('profile-form').reset();
        // 恢复原始值
        document.getElementById('name').value = '{{ current_user.name or "" }}';
        document.getElementById('email').value = '{{ current_user.email or "" }}';
        document.getElementById('bio').value = '{{ current_user.bio or "" }}';
        document.getElementById('website').value = '{{ current_user.website or "" }}';
        document.getElementById('github').value = '{{ current_user.github or "" }}';
        document.getElementById('twitter').value = '{{ current_user.twitter or "" }}';
    }
}

// 头像上传
document.getElementById('avatar-input').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        // 检查文件类型
        if (!file.type.startsWith('image/')) {
            Utils.notification.show('请选择图片文件', 'error');
            return;
        }
        
        // 检查文件大小 (2MB)
        if (file.size > 2 * 1024 * 1024) {
            Utils.notification.show('图片大小不能超过 2MB', 'error');
            return;
        }
        
        // 预览图片
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('avatar-preview').src = e.target.result;
        };
        reader.readAsDataURL(file);
        
        // 上传头像
        uploadAvatar(file);
    }
});

// 上传头像
function uploadAvatar(file) {
    const formData = new FormData();
    formData.append('avatar', file);
    
    fetch('/api/upload/avatar', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Utils.notification.show('头像上传成功', 'success');
            // 更新头像预览
            if (data.data && data.data.avatar_url) {
                document.getElementById('avatar-preview').src = data.data.avatar_url;
                // 更新导航栏头像
                updateNavbarAvatar(data.data.avatar_url);
            }
        } else {
            Utils.notification.show(data.message || '头像上传失败', 'error');
        }
    })
    .catch(error => {
        console.error('上传失败:', error);
        Utils.notification.show('头像上传失败', 'error');
    });
}


// 更新导航栏头像
function updateNavbarAvatar(avatarUrl) {
    const navbarAvatar = document.querySelector('.header-right .w-10.h-10 img');
    if (navbarAvatar) {
        if (avatarUrl) {
            navbarAvatar.src = avatarUrl;
            navbarAvatar.style.display = 'block';
            // 隐藏默认图标
            const defaultIcon = navbarAvatar.parentElement.querySelector('i');
            if (defaultIcon) {
                defaultIcon.style.display = 'none';
            }
        } else {
            // 显示默认图标
            navbarAvatar.style.display = 'none';
            const defaultIcon = navbarAvatar.parentElement.querySelector('i');
            if (defaultIcon) {
                defaultIcon.style.display = 'block';
            }
        }
    }
}

// 表单提交
document.getElementById('profile-form').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {
        name: formData.get('name'),
        email: formData.get('email'),
        bio: formData.get('bio'),
        website: formData.get('website'),
        github: formData.get('github'),
        twitter: formData.get('twitter')
    };
    
    fetch('/admin/profile', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            Utils.notification.show('个人资料更新成功', 'success');
        } else {
            Utils.notification.show(data.message || '更新失败', 'error');
        }
    })
    .catch(error => {
        console.error('更新失败:', error);
        Utils.notification.show('更新失败，请稍后重试', 'error');
    });
});

// 页面加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化表单验证
    const form = document.getElementById('profile-form');
    const inputs = form.querySelectorAll('input[required], textarea[required]');
    
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            if (!this.value.trim()) {
                this.style.borderColor = '#dc3545';
            } else {
                this.style.borderColor = '#ced4da';
            }
        });
    });
});
</script>
{% endblock %}
